//运营管理 - banner设置

import React, { Component } from 'react';
import { LocaleProvider, Icon, Button, Table, Tag } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';

const { Column } = Table;

const data = [];
for (let i = 0; i < 50; i++) {
  data.push({
    key: i,
    picture: '暂无',
    title: `banner${i+1}`,
    time: '2018-12-01 00:00:00--2019-03-31 00:00:00',
    sort: `${i+1}`,
    status: '正常',
    cz: ''
  });
}

const pagination = {
	total: 50,
	className: 'pagination-position',
	showSizeChanger: true,
	showQuickJumper: true,
	showTotal: (total) => {
    return `共 ${total} 条`;
  }
}

class Banner extends Component {
  setRowClassName = (record, index) => {
    return index % 2 === 0 ? 'row-white' : 'row-grey';
  }

	render() {
		return (
      <LocaleProvider locale={zh_CN}>
        <div className="apply">
          <div>
            <div>
              <Icon type="appstore" />
              <span className="apply-font">banner设置</span>
              <div className="btn">
                <Button icon="plus" size="small">新增</Button>
                <Button icon="redo" size="small">刷新</Button>
              </div>
            </div>
          </div>   
          <div className="line"></div>
          <div className="info-table">
            <Table size="small" className="loan-table" rowClassName={this.setRowClassName} pagination={ pagination } bordered dataSource={data}>
              <Column title='图片' align='center' dataIndex='picture' width='70' />
              <Column title='标题' align='center' dataIndex='title' width='70' />
              <Column title='起始时间' align='center' dataIndex='time' width='120' />
              <Column title='排序' align='center' dataIndex='sort' width='70' sorter={(a, b) => a.sort - b.sort } />
              <Column title='状态' align='center' dataIndex='status' width='70' />
              <Column title='操作' align='center' dataIndex='cz' width='70' 
                render={cz => (
                  <span>
                    <Tag color="orange" key={cz}><Icon type='edit' /></Tag>
                    <Tag color="red" key="clo"><Icon type='close' /></Tag>
                  </span>
                )} />
            </Table>
          </div>
        </div>
      </LocaleProvider>  
		);
	}
}

export default Banner;